<md-sidenav class="site-sidenav"
            md-component-id="left"
            md-whiteframe="4"
            md-is-locked-open="$mdMedia('gt-md') && sideNavService.isLockOpen"
            layout="column" >

  <md-toolbar class="md-hue-2 layout-column" style="" layout="column">
    <div layout="row" layout-align="center center" class="kylo-logo">
      <a href="/index.html" title="{{'views.main.Kylo' | translate}}">
      <img src="assets/images/kylo-logo-rev.png" height="50px" ng-if="!collapsed">
      <img src="assets/images/k_logo.png"  width="20px" ng-if="collapsed" style="padding-top: 5px;">
      </a>
    </div>
  </md-toolbar>
  <md-content layout="column" flex style="overflow:hidden">
    <div flex style="overflow-y:hidden;overflow-x:hidden" ng-class="{'collapsed-menu':collapsed}">
        <accordion-menu menu="menu" collapsed="collapsed"></accordion-menu>
    </div>

    <div>
      <md-divider></md-divider>
    <div class="collapse-btn" ng-click="expandCollapseSideNavList($event)" layout-align="start start" layout="row" role="button">

      <span flex></span>
          <ng-md-icon md-icon icon="chevron_left" class="nav-btn" ng-if="!collapsed"></ng-md-icon>
          <ng-md-icon md-icon icon="chevron_right" class="nav-btn" ng-if="collapsed"></ng-md-icon>
    </div>
    </div>
  </md-content>
</md-sidenav>
